// 使用 layui 提供的模块
layui.use(function(){
    // 获取具体的 Layui 模块实例对象 - 便于调用其方法，实现相关的操作
    // 1.获取 Layui 相关的模块实例对象 - table、form、layer、jQuery
    let table = layui.table;
    let form = layui.form;
    let layer = layui.layer;
    let $ = layui.jquery ;

    // 2.动态渲染表格数据
    table.render({
        // 2.0）设置ID - 便于重载表格数据（刷新表格）
        id:'product',

        // 2.1) 绑定表格节点
        elem: '#test',

        // 2.2)访问服务器程序，获取数据
        url:'list_page_condition.do',

        // 2.3)定义表格各列，以及数据的绑定
        cols: [[
            {field:'productId', width:100, title: '商品编号'},
            {field:'productName', title: '商品名称'},
            {field:'productType', width:'10%', title: '商品类型'},
            {field:'productCount', width:100, title: '商品库存'},
            {field:'productPrice', width:100, title: '商品价格'},
            {width:100, title: '上架日期',templet:function (row){
                // 把字符串类型的日期转换为 日期对象
                let d = new Date(row.productDate);
                // 获取年、月、日
                let year = d.getFullYear();
                let month = d.getMonth() + 1 ;
                let day = d.getDate();
                // 返回需要的数据
                return year + '-' + month + '-' + day ;
                }},
            {width:100, title: '是否上架',templet: '#status-switch'},
            {fixed: 'right', title:'操作', width: 200, toolbar: '#barDemo'}
        ]],
        // 开启分页组件
        page:true,
        // 设置默认显示记录数
        limit:5,
        // 设置可控的每页记录数，建议是 limit 的倍数
        limits:[5,10,15,20],
        dqy:'cp'


    }) ;

    // 3.监听商品状态 - 开关操作
    form.on('switch(demo-templet-status)', function(obj){
        let id = this.value;
        let name = this.name;
        layer.tips(id + ' ' + name + ': '+ obj.elem.checked, obj.othis);

        /*
        $.ajax("updateStatus.do",{
            data:{
                id:id,
                status:obj.elem.checked
            }
        }) ;
         */
    });

    // 发起异步请求，查询所有的商品类型，回显到下拉列表框中
    $.get("list_all_type.do",function( res ){
        if(res.code == 200) {
            // 循环遍历 res.data 数组
            $.each(res.data,function(index, obj) {
                // 创建 option 节点
                let optionNode = '<option value="' + obj.typeName + '">' + obj.typeName + '</option>'

                // 把 option 节点添加到 select 节点中
                $("#search_product_type").append(optionNode) ;

                $("#update-type").append(optionNode);

                // 注意：修改了 Layui 的表单后，必须进行重新渲染
                form.render('select');
            });
        }
    })

    // 封装方法，实现商品上架和下架功能
    function changeProductStatus(productId,status) {
        $.ajax("change_product_status.do",{
            method:'post',
            data:{
                productId:productId ,
                productStatus:status
            },
            success:function(res) {
                if(res.code==200) {
                    // 1.提示操作结果
                    layer.msg(res.msg) ;
                    // 2.刷新表格
                    table.reload('product', {
                        page: {
                            // 重新从第 1 页开始
                            curr: 1
                        }
                    });
                }
            }
        }) ;
    }

    // 4.监听表格操作按钮
    table.on('tool(test)',function( obj ){
        // 获取当前行的数据
        let row = obj.data ;
        // console.log(row)

        if(obj.event=='up') {
            // 弹出提示框，让用户确认操作
            layer.confirm('您真的要上架此商品吗？', {icon: 3}, function(){
                // 向服务器发起异步请求 - 带参（商品编号、状态） - Servlet - Dao - 修改 - 回显
                changeProductStatus(row.productId,1)
            }, function(){
                // layer.msg('点击取消按钮');
            });
        } else if(obj.event=='down') {
            // 弹出提示框，让用户确认操作
            layer.confirm('您真的要下架此商品吗？', {icon: 3}, function(){
                // 向服务器发起异步请求 - 带参（商品编号、状态） - Servlet - Dao - 修改 - 回显
                changeProductStatus(row.productId,0)

            }, function(){
                // layer.msg('点击取消按钮');
            });
        } else if(obj.event=='edit') {
            // 1.给表单赋值 - 显示当前行的数据到表单中
            form.val('example', {
                "productId": row.productId,
                "productName": row.productName,
                "productType": row.productType,
                "productPrice": row.productPrice,
                "productStatus": row.productStatus,
                "productDesc": row.productDesc
            });

            // 2.弹出修改窗口
            layer.open({
                type:1,
                title:'修改商品',
                area:['50%','35em'],
                resize:false,
                content:$("#updateContainer"),
                btn:['修改','取消'],
                btn1:function(index) {
                    // 向服务器发起异步请求，实现商品数据的修改
                    $.ajax("update_product.do",{
                        method: 'post',
                        data:$("#updateForm").serialize(),
                        success:function( res ) {
                            if(res.code == 200) {
                                layer.msg("修改商品信息成功");

                                // 关闭弹出窗口 - index 表示弹出窗口的唯一标识
                                layer.close(index);

                                // 刷新表格
                                table.reload('product', {
                                    page: {
                                        // 重新从第 1 页开始
                                        curr: 1
                                    }
                                });
                                return ;
                            }
                            layer.msg("修改商品信息失败");
                            layer.close(index);
                        }
                    }) ;
                },
                btn2:function(index) {
                    alert("你点击了取消按钮...")
                }
            }) ;
        } else if(obj.event=='detail') {
            layer.msg("查询商品详情")
        }


    }) ;

    // 条件查询商品信息
    $("#selectBtn").on("click",function(){
        // 刷新表格 - 重新异步请求到 list_page_condition.do
        // 同时，传递两个参数到 Servlet 中 - productName、productType
        table.reload('product', {
            page: {
                curr: 1 // 重新从第 1 页开始
            },
            where: {
                productName: $('#search_productName').val(),
                productType: $('#search_product_type').val()
            }
        });
    });
});